<template>
  <view>
    <view v-if="loading" class="loading">加载中...</view>
    <view v-else>
      <view v-if="hotels.length === 0" class="empty-tip">
		  <image src="https://gd-hbimg.huaban.com/347707a1292fc7330e70ce5efb094199040af89f3458-mPnwMn_fw236"/>
        暂无民宿信息，<text class="apply-link" @click="applyForBusiness">一键申请入驻</text>
      </view>
      <view v-else>
        <view class="hotel-list">
          <view v-for="(hotel, index) in hotels" :key="index" class="hotel-card" @click="viewHotelDetail(hotel)">
            <image :src="hotel.pictures" class="hotel-image"></image>
            <view class="hotel-name">{{ hotel.homestay_name }}</view>
            <view class="hotel-address">{{ hotel.homestay_address }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: true, // 是否正在加载数据
      hotels: [] // 民宿信息列表
    }
  },
  created() {
    // 模拟从后端获取特定商家账号下的民宿信息
    // 假设sellerId是当前商家的ID，根据实际情况修改
    const sellerId = 1; // 假设商家ID为1
    setTimeout(() => {
      // 模拟从后端获取特定商家账号下的民宿信息
      // 假设hotels是从后端获取的民宿信息列表
      this.hotels = [
        // { homestay_name: '民宿1', homestay_address: '地址1', pictures: 'https://tupian.qqw21.com/article/UploadPic/2020-10/2020101722211881489.jpg', /* 其他民宿信息 */ },
        // { homestay_name: '民宿2', homestay_address: '地址2', pictures: 'https://tupian.qqw21.com/article/UploadPic/2020-10/2020101722211881489.jpg', /* 其他民宿信息 */ },
        // // 其他民宿信息
      ]
      this.loading = false
    }, 1000) // 模拟延迟1秒加载数据
  },
  methods: {
    applyForBusiness() {
      // 处理一键申请入驻的逻辑
      // 可以跳转到申请入驻页面或者执行其他操作
      console.log('一键申请入驻')
    },
    viewHotelDetail(hotel) {
      // 处理查看民宿详情的逻辑
      // 可以跳转到民宿详情页面并传递民宿信息
      console.log('查看民宿详情', hotel)
    }
  }
}
</script>

<style>
.loading {
  text-align: center;
  margin-top: 20rpx;
}

.empty-tip {
  text-align: center;
  margin-top: 20rpx;
  color: #999;
}

.apply-link {
  color: #007aff;
  text-decoration: underline;
  cursor: pointer;
}

.hotel-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20rpx;
}

.hotel-card {
  width: 45%;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.1);
  padding: 20rpx;
  box-sizing: border-box;
  cursor: pointer;
}

.hotel-image {
  width: 100%;
  height: 200rpx;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
}

.hotel-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.hotel-address {
  font-size: 24rpx;
  color: #666;
}
</style>